<template>
  <el-container class="register">
    <el-main>
      <div class="logo">
        <img src="../../static/img/logo.png" alt="">
      </div>
      <div class="change">
        <h3 style="display: none">请选择商家类别</h3>
        <p style="display: none">
          <el-radio-group v-model="zhuying" @change="chooseType">
            <el-radio :label="3" >汽修汽配</el-radio>
            <el-radio :label="6">其它选项</el-radio>
          </el-radio-group>
        </p>
        <el-input v-model="name" placeholder="请输入用户名" prefix-icon="iconfont icon-gerenzhongxin"></el-input>
        <el-input v-model="password" type="password" placeholder="请输入密码" prefix-icon="iconfont icon-icon-mima" ></el-input>
      </div>
      <div class="submitPwd" style="margin-top: 40px">
        <el-button type="danger" round @click="goIndex" v-loading="loading">登录</el-button>
      </div>
      <div class="login">
        <p><b>忘记密码请联系管理员</b><strong></strong><i @click="goRegister">立即注册</i></p>
      </div>
    </el-main>
  </el-container>
</template>

<script>
  import qs from 'qs'
  export default {
    data(){
      return{
        zhuying:'',
        name:'',
       password:'',
        type:'',
        loading:false,
        login:'',

      }
    },
    created(){
      if(localStorage.getItem('isfirstLogin') == 'false'){
        localStorage.removeItem('isfirstLogin');
      }
    },
    methods:{
      chooseType(val){
        this.type = val
      },
      goRegister(){
        this.$router.push('/register')
      },
      goIndex(){
        // if(this.zhuying == ''){
        //   this.$message.warning('请选择商家类别')
        //   return;
        // }else
          if(this.name == ''){
          this.$message.warning('请输入用户名')
          return;
        }else if(this.password == ''){
          this.$message.warning('请输入密码')
          return;
        }else {
            clearTimeout(timer)
          let params = {
              userName:this.name,
              pwd:this.password,
              openId:localStorage.getItem('openId')
          }
          this.loading = true
            let timer;
            let that = this
          this.$axios.post('/api/front/merchant/login',qs.stringify(params))
            .then(res => {
              let result = res.data
              if(result.status == 202){
                timer = setTimeout(function () {
                  that.loading = false
                  that.$message.warning(result.msg)
                  clearTimeout(timer)
                },1200)
              }else {
                timer = setTimeout(function () {
                  that.loading = false
                  that.$message.success(result.msg)
                  clearTimeout(timer);
                  localStorage.setItem('isfirstLogin','notFirst')
                  that.$store.commit('getUserId',res.data.obj);
                  localStorage.setItem('majorType',res.data.obj.merchant.majorType);
                  localStorage.setItem("merchantId",res.data.obj.merchant.merchantId);
                  // sessionStorage.setItem('userId',res.data.obj.merchant.merchantId);
                  that.$router.push('/indexs')
                },1200)

              }
            })


        }


      }
    }
  }
</script>

<style scoped lang="scss">
  .el-container{
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    .el-main{
      width: 90%;
      margin: 0 auto;
      .logo{
        display: flex;
        flex-direction: row;
        justify-content: center;
        padding: 40px 0;
        img{
          width:100px;
          height: 100px;
          border-radius: 50%;
          /*overflow: hidden;*/
        }
      }
      .change{
        display: flex;
        flex-direction: column;
        padding: 0 10px;
        h3{
          font-size: 16px;
          font-weight: normal;
        }
        p{
          display: flex;
          flex-direction: row;
          justify-content: space-around;
          margin-bottom: 30px;
          .el-radio-group{
            display: flex;
            flex-direction: row;
            width: 100%;
            justify-content: space-around;
          }
        }
        .el-input{
          margin: 5px 0;
        }
        span{
          display: flex;
          flex-direction: row;
          padding-left: 5px;
          i{
            display: flex;
            flex-direction: column;
            justify-content: center;
            font-size: 24px;
            color:#ff0740 ;
          }
          .registerArea{
            margin-left: 7px;
          }
        }
      }
      .submitPwd{
        .el-button{
          margin-top: 10px;
          width: 70%;
          font-size: 16px;
        }
      }
      .login{
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        text-align: right;
        font-size: 14px;
        margin-top: 10px;
        p{
          display: flex;
          flex-direction: row;
          width: 100%;
          justify-content: space-around;
          color: red;
          b{
            color: #ccc;
          }
          i{

          }

        }
      }
    }
  }
</style>
